<template>
	<view class="content">
		<view class="edgeInsetTop"></view>
		<wanl-image-cutter @ok="getCropperImage" @cancel="oncancle" :url="url" :fixed="false" :blob="false"
			:maxWidth="500" :maxHeight="500" />
		<!-- {{user}} -->
		<view class="text-center padding-top-xl" :style="{backgroundImage: `url(${$wanlshop.maks()})`}">
			<view @tap="chooseImage" class="cu-avatar avatar" v-if="path"
				:style="{ backgroundImage: 'url(' + path + ')' }"></view>
			<view @tap="chooseImage" class="cu-avatar avatar" v-else
				:style="{ backgroundImage: 'url(' + $wanlshop.oss(avatar, 100, 100) + ')' }"></view>
			<view class=" text-sm" @tap="chooseImage">点击修改头像</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				url: '',
				path: '',
				avatar: '',
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/api/user/getUserInfo',
					method: 'POST',
					data: {
						token: uni.getStorageSync("wanlshop:user").token
					},
					success: res => {
						this.avatar = res.data.avatar;
						this.$store.commit('user/setUserInfo', {
							avatar: res.data.avatar
						});
					}
				});
			},
			chooseImage() {
				
				uni.showModal({
					title: '托普装修基材对存储空间/照片权限申请说明',
					content: '为了提供图片上传的功能，我们需要申请相机/存储权限。',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						console.log('comfirm') //点击确定之后执行的代码
						uni.chooseImage({
							count: 1, // 默认9
							sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
							success: res => {
								// 设置url的值，显示控件
								this.url = res.tempFilePaths[0];
							}
						});
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			},
			getCropperImage(e) {
				this.path = e.path;
				this.url = '';
				console.log(e.path)
				// 上传图片
				uni.uploadFile({
					url: 'https://zm.zonmay.com/api/UpFiles/uploadimg',
					filePath: e.path,
					name: 'file',
					formData: null,
					success: res => {
						console.log(JSON.parse(res.data))
						let avatar = JSON.parse(res.data).data.url
						uni.request({
							url: '/api/user/updateUserInfo',
							method: 'POST',
							data: {
								avatar: JSON.parse(res.data).data.pic_id,
								token: uni.getStorageSync("wanlshop:user").token
							},
							success: data => {
								// alert(avatar)
								this.$store.commit('user/setUserInfo', {
									avatar: avatar
								});
							}
						});
					},
					fail: error => {
						this.$wanlshop.msg(JSON.parse(error.data).msg);
					}
				});
			},
			oncancle() {
				this.url = '';
			}
		}
	};
</script>
<style>
	.avatar {
		width: 5rem;
		height: 5rem;
		background-color: #e5e5e5;
		border-radius: 50%;
		margin: 30rpx;
	}
</style>